<template>
  <div>
    <headerNav></headerNav>
    <div class="Loading_cover" v-if="loading">
      <div
        class="Loading_cover_content"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      ></div>
    </div>
    <div class="comparisonDetails">
      <div class="comparisonDetails_title">
        <p>
          <span @click="$router.push('/')">首页</span>>
          <span @click="$router.push('/condition')">企业对比</span>>
          <span>对比详情</span>
        </p>
      </div>
      <div class="comparisonDetails_top">
        <div class="comparisonDetails_top_left">
          <img src="../../assets/PolicyDataCenter.png" alt />
          <p>已选对比企业</p>
        </div>
        <div class="comparisonDetails_top_right">
          <!-- <span>分享</span> -->
          <span @click="_export">导出</span>
          <span @click="Reselect">重新选择&nbsp;>></span>
        </div>
      </div>
      <div class="comparisonDetails_content">
        <div class="comparisonDetails_content_Button">
          <p v-if="switchDetails" @click="details()">查看详情</p>
          <p v-else @click="fanHui()">返回</p>
        </div>
        <table ref="exportTable">
          <tbody>
            <tr>
              <td width="200" colspan="2">公司名称</td>

              <td v-for="item in companyData">
                <span
                  :style="{ width: concealmentWidth }"
                  class="concealment"
                  @click="toDetail(item.companyId)"
                >{{item.companyName}}</span>
              </td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td width="200" colspan="2">扶持金额（万）</td>
              <td v-for="item in supportAmount">{{ item }}</td>
            </tr>
          </tbody>
          <!-- 荣誉渲染区域 -->
          <tbody>
            <tr>
              <td style="border-right: none">荣誉</td>
              <td></td>
              <td v-for="item in honorData">{{ item }}</td>
            </tr>
            <tr v-show="switchDetails" v-for="(item, index) in levelData">
              <td width="80" class="ys" :rowspan="levelData.length" v-if="index == 0">级别</td>
              <td width="120" style="text-align: center">{{ item.name }}</td>
              <td v-for="(items, Dyindex) in companyData">{{ item.data[Dyindex] }}</td>
            </tr>
            <tr v-show="switchDetails" v-for="(item, index) in departmentData">
              <td width="80" class="ys" :rowspan="departmentData.length" v-if="index == 0">部门</td>
              <td width="120" style="text-align: center">{{ item.name }}</td>
              <td v-for="(items, Dyindex) in companyData">{{ item.data[Dyindex] }}</td>
            </tr>
            <tr v-show="switchDetails" v-for="(item, index) in categoryData">
              <td width="80" class="ys" :rowspan="categoryData.length" v-if="index == 0">类别</td>
              <td width="120" style="text-align: center">{{ item.name }}</td>
              <td v-for="(items, Dyindex) in companyData">{{ item.data[Dyindex] }}</td>
            </tr>
            <tr v-show="!switchDetails" v-for="item in honorAllData">
              <td width="199" style="border-right: none">
                <p>{{ item.name }}</p>
              </td>
              <td width="1" class="comparisonDetails_content_special"></td>
              <!-- <td v-for="(items, Dyindex) in companyData">
              <span v-if="item.data[Dyindex] == '-'">{{
                item.data[Dyindex]
              }}</span>
              <span v-else style="color: red">{{ item.data[Dyindex] }}</span>
              </td>-->
              <td v-for="(items, Dyindex) in companyData">
                <span style="color: red">{{ item.data[Dyindex] }}</span>
              </td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td width="200" colspan="2">知识产权</td>
              <td v-for="item in knowledgeData">{{ item }}</td>
            </tr>
            <tr v-for="item in patentData">
              <td width="200" colspan="2">{{ item.name }}</td>
              <td v-for="(items, Dyindex) in companyData">{{ item.data[Dyindex] }}</td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td width="200" colspan="2">商标</td>
              <td v-for="item in trademarkData">{{ item }}</td>
            </tr>
            <tr v-for="item in trademarkTypeData">
              <td width="200" colspan="2">{{ item.name }}</td>
              <td v-for="(items, Dyindex) in companyData">{{ item.data[Dyindex] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <footerNav></footerNav>
    <navigation></navigation>
  </div>
</template>

<script>
import { sessionTake } from "../../util/validate.js";
import { commonRequest } from "../../api/api.js";
export default {
  name: "comparisonDetails",
  data() {
    return {
      // 加载中
      loading: true,
      switchDetails: true,
      // 所有企业
      companyData: [],
      // 当前企业
      companyIndex: 0,
      // 判读是否请求完毕
      companySuccess: true,
      // 扶持金额
      supportAmount: [],
      // 荣誉总数
      honorData: [],
      // 级别
      levelData: [],
      // 级别判断
      levelJudge: [],
      // 部门
      departmentData: [],
      // 部门判断
      departmentJudge: [],
      // 类别
      categoryData: [],
      // 类别判断
      categoryJudge: [],
      // 知识产权
      knowledgeData: [],
      // 专利
      patentData: [],
      // 专利判断
      patentJudge: [],
      // 商标总数
      trademarkData: [],
      // 所有商标
      trademarkTypeData: [],
      // 所有商标判断
      trademarkTypeJudge: [],
      // 所有荣誉
      honorAllData: [],
      // 所有荣誉判断
      honorAllJudge: [],
      // 当前荣誉企业
      honorIndex: 0,
      // 荣誉是否加载完成
      honorSuccess: true,
      // 获取荣誉
      honorDedails: []
    };
  },
  computed: {
    // 计算企业显示宽度
    concealmentWidth() {
      return 1000 / this.companyData.length - 32 + "px";
    }
  },
  mounted() {
    var that = this;
    that.companyData = JSON.parse(sessionTake("enterpriseComparison"));
    // console.log("228", that.companyData);

    that.companyData.forEach(el => {
      // console.log(el.companyId);
      // console.log(el);
      // let
    });
    var companyTime = setInterval(function() {
      if (
        that.companyIndex < that.companyData.length &&
        that.companySuccess == true
      ) {
        that.companySuccess = false;
        that.comparisonData(
          that.companyData[that.companyIndex].companyId,
          that.companyIndex
        );
        // 企业详情(获取荣誉)
        // that.getContrastDedai(
        //   that.companyData[that.companyIndex].companyId,
        //   that.companyIndex
        // );
      }
      if (that.companyIndex >= that.companyData.length) {
        clearInterval(companyTime);
        that.loading = false;
      }
    }, 200);
    var honorTime = setInterval(function() {
      if (
        that.honorIndex < that.companyData.length &&
        that.honorSuccess == true
      ) {
        that.honorSuccess = false;
        that.honorContrast(
          that.companyData[that.honorIndex].companyId,
          that.honorIndex
        );
      }
      if (that.honorIndex >= that.companyData.length) {
        clearInterval(honorTime);
      }
    }, 200);
  },
  methods: {
    // 获取荣誉详情
    // getContrastDedai(id, index) {
    //   commonRequest(
    //     "/api/cms/cmsCompany/getCompanyHonorProjectInfo?id=" + id
    //   ).then((res) => {
    //     this.honorDedails = res;
    //     console.log(res);
    //   });
    // },
    // 公司对比数据
    comparisonData(id, index) {
      var that = this;
      commonRequest("/api/cms/cmsCompany/companyContrast", {
        id: id
      }).then(res => {
        setTimeout(function() {
          that.companySuccess = true;
          that.companyIndex = that.companyIndex + 1;
        }, 100);
        // 扶持金额
        if (res.supportAmount == null) {
          that.supportAmount[index] = 0;
        } else {
          that.supportAmount[index] = res.supportAmount;
        }
        // 荣誉总数
        if (res.companyHonorLevelCount == null) {
          that.honorData[index] = 0;
        } else {
          that.honorData[index] = res.companyHonorLevelCount;
        }
        // 级别
        if (res.companyHonorLevel.length == 0) {
          for (let i = 0; i < that.levelData.length; i++) {
            that.levelData[i].data[index] = 0;
          }
        } else {
          for (let i = 0; i < res.companyHonorLevel.length; i++) {
            if (
              that.levelJudge.indexOf(res.companyHonorLevel[i].projectLevel) ==
              -1
            ) {
              var dataLevel = [0, 0, 0, 0, 0];
              dataLevel[index] = res.companyHonorLevel[i].total;
              that.levelData.push({
                name: res.companyHonorLevel[i].projectLevel,
                data: dataLevel
              });
              that.levelJudge.push(res.companyHonorLevel[i].projectLevel);
            } else {
              var Levelindex = that.levelJudge.indexOf(
                res.companyHonorLevel[i].projectLevel
              );
              that.levelData[Levelindex].data[index] =
                res.companyHonorLevel[i].total;
            }
          }
        }
        // 部门
        if (res.companyHonorDepartment.length == 0) {
          for (let i = 0; i < that.departmentData.length; i++) {
            that.departmentData[i].data[index] = 0;
          }
        } else {
          for (let i = 0; i < res.companyHonorDepartment.length; i++) {
            if (
              that.departmentJudge.indexOf(
                res.companyHonorDepartment[i].department
              ) == -1
            ) {
              var dataDepartment = [0, 0, 0, 0, 0];
              dataDepartment[index] = res.companyHonorDepartment[i].total;
              that.departmentData.push({
                name: res.companyHonorDepartment[i].department,
                data: dataDepartment
              });
              that.departmentJudge.push(
                res.companyHonorDepartment[i].department
              );
            } else {
              var Departmentindex = that.departmentJudge.indexOf(
                res.companyHonorDepartment[i].department
              );
              that.departmentData[Departmentindex].data[index] =
                res.companyHonorDepartment[i].total;
            }
          }
        }
        // 类别
        if (res.companyHonorType.length == 0) {
          for (let i = 0; i < that.categoryData.length; i++) {
            that.categoryData[i].data[index] = 0;
          }
        } else {
          for (let i = 0; i < res.companyHonorType.length; i++) {
            if (
              that.categoryJudge.indexOf(res.companyHonorType[i].projectType) ==
              -1
            ) {
              var dataCategory = [0, 0, 0, 0, 0];
              dataCategory[index] = res.companyHonorType[i].total;
              that.categoryData.push({
                name: res.companyHonorType[i].projectType,
                data: dataCategory
              });
              that.categoryJudge.push(res.companyHonorType[i].projectType);
            } else {
              var Categoryindex = that.categoryJudge.indexOf(
                res.companyHonorType[i].projectType
              );
              that.categoryData[Categoryindex].data[index] =
                res.companyHonorType[i].total;
            }
          }
        }
        // 知识产权
        if (res.companyPatentCount == null) {
          that.knowledgeData[index] = 0;
        } else {
          that.knowledgeData[index] = res.companyPatentCount;
        }
        // 专利
        if (res.companyPatentInfo.length == 0) {
          for (let i = 0; i < that.patentData.length; i++) {
            that.patentData[i].data[index] = 0;
          }
        } else {
          for (let i = 0; i < res.companyPatentInfo.length; i++) {
            if (
              that.patentJudge.indexOf(res.companyPatentInfo[i].typeDesc) == -1
            ) {
              var dataPatent = [0, 0, 0, 0, 0];
              dataPatent[index] = res.companyPatentInfo[i].total;
              that.patentData.push({
                name: res.companyPatentInfo[i].typeDesc,
                data: dataPatent
              });
              that.patentJudge.push(res.companyPatentInfo[i].typeDesc);
            } else {
              var Patentindex = that.patentJudge.indexOf(
                res.companyPatentInfo[i].typeDesc
              );
              that.patentData[Patentindex].data[index] =
                res.companyPatentInfo[i].total;
            }
          }
        }
        // 商标总数
        if (res.companyTrademarkCount == null) {
          that.trademarkData[index] = 0;
        } else {
          that.trademarkData[index] = res.companyTrademarkCount;
        }
        //所有商标
        if (res.companyTrademarkInfo.length == 0) {
          for (let i = 0; i < that.trademarkTypeData.length; i++) {
            that.trademarkTypeData[i].data[index] = 0;
          }
        } else {
          for (let i = 0; i < res.companyTrademarkInfo.length; i++) {
            if (
              that.trademarkTypeJudge.indexOf(
                res.companyTrademarkInfo[i].categoryName
              ) == -1
            ) {
              var dataTrademarkType = [0, 0, 0, 0, 0];
              dataTrademarkType[index] = res.companyTrademarkInfo[i].total;
              that.trademarkTypeData.push({
                name: res.companyTrademarkInfo[i].categoryName,
                data: dataTrademarkType
              });
              that.trademarkTypeJudge.push(
                res.companyTrademarkInfo[i].categoryName
              );
            } else {
              var TrademarkTypeindex = that.trademarkTypeJudge.indexOf(
                res.companyTrademarkInfo[i].categoryName
              );
              that.trademarkTypeData[TrademarkTypeindex].data[index] =
                res.companyTrademarkInfo[i].total;
            }
          }
        }
      });
    },
    // 所有荣誉对比
    honorContrast(id, index) {
      var that = this;
      commonRequest(
        "/api/cms/cmsCompany/getCompanyHonorProjectInfo?id=" + id
      ).then(res => {
        // console.log("463", res);
        setTimeout(function() {
          that.honorIndex = that.honorIndex + 1;
          that.honorSuccess = true;
        }, 100);
        for (let i = 0; i < res.length; i++) {
          if (that.honorAllJudge.indexOf(res[i].projectName) == -1) {
            var honorData = ["-", "-", "-", "-", "-"];
            if (res[i].supportAmount != null) {
              honorData[index] = res[i].supportAmount;
            } else {
              honorData[index] = "√";
            }
            that.honorAllData.push({
              name: res[i].projectName,
              data: honorData
            });
            that.honorAllJudge.push(res[i].projectName);
          } else {
            var Indexhonor = that.honorAllJudge.indexOf(res[i].projectName);
            if (res[i].supportAmount != null) {
              that.honorAllData[Indexhonor].data[index] = res[i].supportAmount;
            } else {
              that.honorAllData[Indexhonor].data[index] = "√";
            }
          }
        }

        // console.log(this.honorAllData);
      });
    },
    // 重新选择
    Reselect() {
      this.$router.push("/condition");
    },
    // 查看详情
    details() {
      this.switchDetails = false;
    },
    // 返回
    fanHui() {
      this.switchDetails = true;
    },
    // 导出
    _export() {
      var that = this;
      let str = '<tr class="lztables"><td colspan="2">公司名称</td>';
      for (let i = 0; i < that.companyData.length; i++) {
        str += `<td>${that.companyData[i].companyName}</td>`;
      }
      str += "</tr>";
      str += '<tr class="lztables"><td colspan="2">扶持金额(万)</td>';
      for (let i = 0; i < that.supportAmount.length; i++) {
        str += `<td>${that.supportAmount[i]}</td>`;
      }
      str += "</tr>";
      str += '<tr class="lztables"><td colspan="2">荣誉</td>';
      for (let i = 0; i < that.honorData.length; i++) {
        str += `<td>${that.honorData[i]}</td>`;
      }
      str += "</tr>";
      for (let i = 0; i < that.levelData.length; i++) {
        if (i == 0) {
          str += `<tr class="baise"><td rowspan="${that.levelData.length}">级别</td><td>${that.levelData[i].name}</td>`;
        } else {
          str += `<tr class="baise"><td>${that.levelData[i].name}</td>`;
        }
        for (let q = 0; q < that.companyData.length; q++) {
          str += `<td>${that.levelData[i].data[q]}</td>`;
        }
        str += "</tr>";
      }
      for (let i = 0; i < that.departmentData.length; i++) {
        if (i == 0) {
          str += `<tr class="baise"><td rowspan="${that.departmentData.length}">部门</td><td>${that.departmentData[i].name}</td>`;
        } else {
          str += `<tr class="baise"><td>${that.departmentData[i].name}</td>`;
        }
        for (let q = 0; q < that.companyData.length; q++) {
          str += `<td>${that.departmentData[i].data[q]}</td>`;
        }
        str += "</tr>";
      }
      for (let i = 0; i < that.categoryData.length; i++) {
        if (i == 0) {
          str += `<tr class="baise"><td rowspan="${that.categoryData.length}">类别</td><td>${that.categoryData[i].name}</td>`;
        } else {
          str += `<tr class="baise"><td>${that.categoryData[i].name}</td>`;
        }
        for (let q = 0; q < that.companyData.length; q++) {
          str += `<td>${that.categoryData[i].data[q]}</td>`;
        }
        str += "</tr>";
      }
      for (let i = 0; i < that.honorAllData.length; i++) {
        str += `<tr class="baise"><td colspan="2">${that.honorAllData[i].name}</td>`;
        for (let q = 0; q < that.companyData.length; q++) {
          str += `<td>${that.honorAllData[i].data[q]}</td>`;
        }
        str += "</tr>";
      }
      str += '<tr class="lztables"><td colspan="2">知识产权</td>';
      for (let i = 0; i < that.knowledgeData.length; i++) {
        str += `<td>${that.knowledgeData[i]}</td>`;
      }
      str += "</tr>";
      for (let i = 0; i < that.patentData.length; i++) {
        str += `<tr class="baise"><td colspan="2">${that.patentData[i].name}</td>`;
        for (let q = 0; q < that.companyData.length; q++) {
          str += `<td>${that.patentData[i].data[q]}</td>`;
        }
        str += "</tr>";
      }
      str += '<tr class="lztables"><td colspan="2">商标</td>';
      for (let i = 0; i < that.trademarkData.length; i++) {
        str += `<td>${that.trademarkData[i]}</td>`;
      }
      str += "</tr>";
      for (let i = 0; i < that.trademarkTypeData.length; i++) {
        str += `<tr class="baise"><td colspan="2">${that.trademarkTypeData[i].name}</td>`;
        for (let q = 0; q < that.companyData.length; q++) {
          str += `<td>${that.trademarkTypeData[i].data[q]}</td>`;
        }
        str += "</tr>";
      }
      // console.log(str);
      var template = `<table cellspacing="0" ><tbody>${str}</tbody></table>`;
      template = template.replace(/"/g, "'");
      var url = "https://api.51bmj.cn/dm/unauth/excel/exportXls";
      var xhr = new XMLHttpRequest();
      xhr.open("POST", url, true);
      xhr.responseType = "blob";
      xhr.onload = function() {
        // 请求完成
        if (this.status === 200) {
          // 返回200
          var blob = this.response;
          var Lzexceldc = document.createElement("a");
          Lzexceldc.href = window.URL.createObjectURL(blob);
          Lzexceldc.download = "企业对比.xls";
          Lzexceldc.click();
        }
      };
      var formdata = new FormData();
      formdata.append("htmlStr", template);
      xhr.send(formdata);
    },
    // 跳转企业详情
    toDetail(id) {
      window.open("/enterprise/honor?id=" + id, "_blank");
    }
  }
};
</script>

<style lang="less" scoped>
.Loading_cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  .Loading_cover_content {
    width: 100%;
    height: 100%;
  }
}
.comparisonDetails {
  background-color: #fff;
}
.comparisonDetails_title {
  background-color: #f9fbff;
  p {
    line-height: 80px;
    width: 1200px;
    margin: 0 auto;
    font-size: 14px;
    color: #333;
    span {
      font-size: 14px;
      margin: 0px 10px;
      cursor: pointer;
    }
  }
}
.comparisonDetails_top {
  padding: 32px 0;
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  .comparisonDetails_top_left {
    float: left;
    img {
      float: left;
      width: 18px;
      margin-top: 9px;
      margin-right: 20px;
    }
    p {
      float: left;
      line-height: 36px;
      font-size: 20px;
      color: #333;
      font-weight: 700;
    }
  }
  .comparisonDetails_top_right {
    float: right;
    span {
      display: inline-block;
      width: 100px;
      height: 36px;
      line-height: 34px;
      background-color: #ffffff;
      border: 1px solid #44a2ff;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      color: #44a2ff;
      margin-left: 10px;
      cursor: pointer;
      &:nth-child(2) {
        border-color: #44a2ff;
        background-color: #44a2ff;
        color: #fff;
      }
      &:nth-child(3) {
        border-color: #fff;
        background-color: #fff;
        color: #333;
      }
    }
  }
}
.comparisonDetails_content {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  table {
    width: 100%;
    border-spacing: 0;
    border-left: 1px solid #daeaf5;
    border-bottom: 1px solid #daeaf5;
    box-sizing: border-box;
    tbody {
      tr {
        background-color: #fff;
        &:nth-child(1) {
          background-color: #f9fbff;
        }
        td {
          padding: 15px 10px 15px 20px;
          font-size: 14px;
          color: #333;
          border-top: 1px solid #daeaf5;
          border-right: 1px solid #daeaf5;
          text-align: center;
          box-sizing: border-box;
          &:nth-child(1) {
            text-align: left;
          }
          p {
            width: 169px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .concealment {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            color: #1678ff;
            font-weight: bold;
          }
        }
        .ys {
          color: #44a2ff;
        }
        .comparisonDetails_content_special {
          padding: 0 0;
          border-bottom: none;
        }
      }
    }
  }
  .comparisonDetails_content_Button {
    position: absolute;
    right: 10px;
    top: 116px;
    p {
      color: #44a2ff;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>
